//职员管理

import React, {Component} from 'react';
import app from '../app';
import {Form, Input, Button, Table, Modal, Row, Upload, Icon, DatePicker, Select, Pagination} from 'antd';
import {project, sku} from '../value';
import '../css/other.css';
import '../css/userManage.css';
import moment from 'moment';
import {config} from "../config";
import {AddSkus, EditSkus} from '../components/operateManage';


const FormItem = Form.Item;
const confirm = Modal.confirm;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;

class SkuManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchData: {},
            pagination: {current: 1, pageSize: 10, total: 0},
            positionId: [],
            data: [],
            currentPageSize: 0,
            pageCount: 0,
            imgUrl: '',
        }
    }

    columns = [
        {
            title: '序号',
            dataIndex: 'order_number'
        },
        {
            title: '属性名',
            dataIndex: 'sku_property_name'
        },
        {
            title: '操作',
            dataIndex: this.columns,
            render: data => {
                return (
                    <div>
                        <EditSkus data={data} refresh={() => this.handleRefreshAfterUpdate()}></EditSkus>
                        <Button style={{marginLeft: '10px'}} type="danger"
                                onClick={() => this.handleDeleteUser(data.sku_property_id)}>删除</Button>
                    </div>
                )
            }
        },
    ];

    render() {
        const {pagination, currentPageSize} = this.state;
        return (
            <div style={{paddingBottom: 25}}>
                <div className="pageTitle">
                    商品管理/属性管理
                </div>
                <div className={'btnContainer'}>
                    <AddSkus refresh={() => this.handleRefreshAfterCreate()}></AddSkus>
                </div>
                <SearchLists refresh={() => this.handleRefreshAfterCreate()}
                             clickSearch={(values) => this.handleGetValue(values)}/>
                <div style={{fontSize: 12, marginBottom: 20, marginTop: 20}}>
                    当前第<span style={{color: 'red'}}>{pagination.current}</span>页, 当前页共<span
                    style={{color: 'red'}}>{currentPageSize}</span>条数据，一共<span
                    style={{color: 'red'}}>{pagination.total}</span>条数据
                </div>
                <Row style={{marginTop: '20px'}}>
                    <Table
                        columns={this.columns}
                        rowKey={(record, index) => index}
                        dataSource={this.state.data}
                        loading={this.state.loading}
                        pagination={false}
                        onChange={this.handleTableChange}
                    />
                </Row>
                <Row style={{textAlign: 'right', marginTop: 20}}>
                    <Pagination {...pagination} showSizeChanger showQuickJumper
                                onChange={(page, pageSize) => this.handleOnChange(page, pageSize)}
                                onShowSizeChange={(current, size) => this.handleOnShowSizeChange(current, size)}/>
                </Row>
            </div>
        )
    }

    /**
     * 初始化
     */
    componentDidMount() {
        const param = {
            page: 1,
            size: 10
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 获取搜索条件
     */
    handleGetValue(value) {
        const searchData = {nameSearch: value.nameSearch};
        this.setState({searchData});
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 处理创建后刷新事件
     */
    handleRefreshAfterCreate() {
        const {searchData} = this.state;
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 处理删除后刷新事件
     */
    handleRefreshAfterDelete() {
        const {searchData} = this.state;
        const param = {
            page: 1,
            size: 10,
            ...searchData
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 处理更新后刷新事件
     */
    handleRefreshAfterUpdate() {
        const {searchData, pagination} = this.state;
        const param = {
            page: pagination.current,
            size: pagination.pageSize,
            ...searchData
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 处理页码、显示数量变化事件
     * @param pagination
     * @param filters
     * @param sorter
     */
    handleTableChange = (pagination, filters, sorter) => {
        const current = pagination.current;
        const size = pagination.pageSize;
        const pagination1 = this.state.pagination;
        pagination1.current = current;
        pagination1.pageSize = size;
        this.setState({pagination: pagination1});
    };

    /**
     * 处理页面改变事件
     * @param page
     * @param pageSize
     */
    handleOnChange(page, pageSize) {
        const {searchData} = this.state;
        const param = {
            page,
            size: pageSize,
            ...searchData
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 处理pageSize变化回调
     * @param current
     * @param size
     */
    handleOnShowSizeChange(current, size) {
        const {searchData} = this.state;
        const param = {
            page: current,
            size,
            ...searchData
        };
        this.handleSearchSkuList(param);
    }

    /**
     * 查找sku属性列表
     * @param param
     */
    handleSearchSkuList(param) {
        let _this = this;
        _this.setState({loading: true});
        app.post(sku.SEARCH_SKU_LIST, param).then(result => {
            if (result.code === 1) {
                const data = result.data;
                for (let i = 0; i < data.length; i++) {
                    data[i].order_number = i + 1;
                }
                const pagination = {total: data.length, current: param.page, pageSize: param.size};
                this.setState({pagination, data: data, loading: false, currentPageSize: data.length});
            } else {
                app.alert(result.msg, 'success', 1);
                const pagination = {total: 0, current: 0, pageSize: 0};
                this.setState({pagination, data: [], loading: false, currentPageSize: 0});
            }
        });
    }

    /**
     * 删除用户
     * @param id
     */
    handleDeleteUser(id) {
        let _this = this;
        confirm({
            content: '您确定要删除该属性吗？',
            onOk() {
                app.post(sku.UPDATE_SKU_ISABLE, {sku_property_id: id, sku_property_isable: '2'}).then((req) => {
                    if (req.code == '1') {
                        app.alert("删除成功", 'success', 1);
                        _this.handleRefreshAfterDelete();
                    } else {
                        app.alert(req.msg, 'error', 1);
                    }
                })
            },
            onCancel() {
            },
        });
    }

    /**
     * 操作用户状态
     */
    handleEditStatus(id, type) {

    }

    /**
     * 跳转详情页
     */
    handleRedirectDetail(id) {
        this.props.history.push(config.path + '/home/orderDetail/' + id);
    }

    /**
     * 批量发货
     */
    handleSendGood() {
        let positionId = this.state.positionId;
        if (positionId.length <= 0) {
            app.alert('请选择订单', 'error', 1);
            return;
        }
        console.log(positionId);
    }

    /**
     * 批量配货
     */
    handleMatchGood() {
        let positionId = this.state.positionId;
        if (positionId.length <= 0) {
            app.alert('请选择订单', 'error', 1);
            return;
        }
        console.log(positionId);
    }

    /**
     * 批量取消订单
     */
    handleCancelGood() {
        let positionId = this.state.positionId;
        if (positionId.length <= 0) {
            app.alert('请选择订单', 'error', 1);
            return;
        }
        console.log(positionId);
    }
}


class SearchList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            project_name: '',
            typeList: [
                {
                    id: '01',
                    name: '会员注册奖励'
                }
            ]
        }
    };

    render() {
        return (
            <div className={'user-search-container'} style={{marginTop: 20}}>
                <div className={'user-search-item1'}>
                    <div className={'user-search-item-type'}>属性名：</div>
                    <Input placeholder={'属性名'} style={{width: 180}}
                           onChange={(e) => this.handleUserNameChange(e)}
                           onPressEnter={(e) => this.handleUserNamePress(e)}/>
                </div>
                <div className={'user-search-footer'}>
                    <Button type="primary" onClick={() => this.handleSearchComplain()}>搜索</Button>
                </div>
            </div>
        )
    };

    componentDidMount() {
    };

    /**
     * 处理用户名输入框变化事件
     * @param e
     */
    handleUserNameChange(e) {
        this.setState({nameSearch: e.target.value});
    }

    handleUserNamePress() {
        this.handleSearchComplain();
    }


    /**
     * 搜索
     */
    handleSearchComplain() {
        let {nameSearch} = this.state;
        let data = {
            nameSearch
        };
        this.props.clickSearch(data);
    }
}

const SearchLists = Form.create()(SearchList);
const SkuManages = Form.create()(SkuManage);

export default SkuManages;